import React, { Component } from 'react'

export default class App extends Component {



    render() {

        const obj = {
            color: 'red',
            fontSize: 50,
            // 写在字符串中的单位不能省略
            border: '1px solid blue',
            // 这里可以省略掉单位不写，默认是 px 
            width: 200,
            height: 200,
            // 行高如果不加单位会默认为倍数
            lineHeight: '100px'
        }


        return (
            <div>
                {/* 该写法是错误的，不能在 style 设置字符串 */}
                {/* <h1 style='color: red'>App 组件</h1> */}

                {/* 不能直接这样直接写属性，因为 {js表达式} */}
                {/* <h1 style={color: 'red'}>App 组件</h1> */}


                {/* 行内样式的写法 */}
                <h1 style={{ color: 'red' }}>App 组件</h1>
                <hr />

                <h1 style={obj}>有些人无话可说，有些话无人可说。</h1>

            </div >
        )
    }
}
